<template>
	<view class="content">
		<view class="report-con" style="display: flex;align-items: center;">
			<image :src="pageData.rec_pic" mode="aspectFill" style="width: 144rpx;flex-shrink: 0;height: 144rpx;">
			</image>
			<view
				style="margin-left: 16rpx;display: flex;flex-direction: column;flex: 1;height: 144rpx;justify-content: space-between;">
				<view style="color: #333333;font-size: 28rpx;">{{pageData.name}}</view>
				<view style="color: #333333;font-size: 24rpx;font-weight: 500;">{{pageData.sortingWeight}}斤</view>
				<view style="display: flex;align-items: center;">
					<view style="color: #333333;font-size: 24rpx;font-weight: 500;">¥{{pageData.amount}}</view>
					<view style="color: #999999;font-size: 24rpx;font-weight: 500;margin-left: auto;">
						x{{pageData.count}}</view>
				</view>
			</view>

		</view>
		<view class="report-con" style="margin-top: 31rpx;">
			<view style="font-weight: 500;width: 688rpx;">退款金额</view>
			<view class="report-text">
				<u--input type="digit" :placeholder="'请输入退款金额，最多¥'+pageData.amount" border="none"
					v-model="refundAmount"></u--input>
			</view>

		</view>
		<view class="report-con" style="margin-top: 31rpx;">
			<view style="font-weight: 500;width: 688rpx;">退回重量</view>
			<view class="report-text">
				<u--input type="digit" :placeholder="'请输入退回重量，最多'+pageData.sortingWeight+'斤'" border="none"
					v-model="refundWeight"></u--input>
			</view>
		</view>
		<view class="report-con" style="margin-top: 31rpx;">
			<view style="font-weight: 500;width: 688rpx;">退款说明</view>
			<view class="report-text">
				<u--textarea v-model="refundRemark" placeholder="请输入内容" border="none" height="100" maxlength="200"
					count></u--textarea>
			</view>
		</view>
		<view class="report-con" style="margin-top: 31rpx;">
			<view style="font-weight: 500;width: 688rpx;">上传图片<text
					style="font-size: 25rpx;font-weight: 400;color: #666666;">（最多六张）</text></view>
			<view class="upload-img">
				<u-upload :fileList="fileList" width="200rpx" height="200rpx" @afterRead="carRead" @delete="deletePic"
					multiple :maxCount="6">
				</u-upload>
			</view>
		</view>
		<view class="report-con" style="margin-top: 31rpx;">
			<view style="font-weight: 500;width: 688rpx;">上传视频</view>
			<view class="upload-img">
				<u-upload :fileList="videoList" width="200rpx" height="200rpx" @afterRead="videoRead"
					@delete="deleteVideo" multiple :maxCount="1" accept="video">
				</u-upload>
			</view>
		</view>
		<view class="but-con">
			<view class="card-but" @click="addCard">提交</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				pageData: {},
				refundRemark: '',
				carImg: [],
				fileList: [],
				tagList: [],
				tagName: '',
				tagIndex: '',
				videoList: [],
				carVideo: [],
				refundAmount: '',
				refundWeight: '',
			}
		},
		onLoad(option) {
			this.pageData = JSON.parse(decodeURIComponent(option.item));
			console.log(this.pageData);
			// this.getType()
		},
		methods: {
			selectTag(item, index) {
				this.tagIndex = index
				this.tagName = item.value
			},
			getType() {
				const type = {
					url: 'feedback/getReportType',
					method: 'GET'
				};
				this.$q(type).then(({
					code,
					data,
					msg
				}) => {
					if (code == 1) {
						this.tagList = data
					} else {
						uni.$u.toast(msg);
					}
				});
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1);
				this.carImg.splice(event.index, 1);

			},

			async addCard() {
				if (!this.refundAmount) {
					uni.showToast({
						title: '请输入退款金额',
						icon: 'none'
					})
					return
				}
				if (!this.refundWeight) {
					uni.showToast({
						title: '请输入退回重量',
						icon: 'none'
					})
					return
				}
				const res = await this.$apis.order.refund({
					id: this.pageData.id,
					refundPic: this.carImg.join(),
					refundMp4: this.carVideo.join(),
					refundAmount: this.refundAmount,
					refundRemark: this.refundRemark,
					refundWeight: this.refundWeight

				})
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
			async carRead(event) {
				let lists = [].concat(event.file);
				console.log(lists);
				let fileListLen = this.fileList.length;
				console.log(lists);
				lists.map(item => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				console.log(this.fileList);
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result);
					this.carImg.push(result.url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					}))
					fileListLen++
				}
				console.log(this.carImg);
			},
			async videoRead(event) {
				let lists = [].concat(event.file);

				let fileListLen = this.videoList.length;

				lists.map(item => {
					this.videoList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				console.log(lists);
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					// const thumb = await this.uploadFilePromise(lists[i].thumb)
					// console.log(thumb);
					// this.thumb = thumb.url
					// this.videoPlay = this.videoList[0].thumb
					this.carVideo.push(result.url)
					let item = this.videoList[fileListLen]
					console.log(this.videoList);
					this.videoList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					}))
					fileListLen++
				}

			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.api + '/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'content-type': 'multipart/form-data',
							'token': uni.getStorageSync('token') || '',
							'X-Requested-With': 'XMLHttpRequest',
						},
						formData: {
							"file": url,
						},
						success: (res) => {
							let obj = JSON.parse(res.data);
							resolve(obj)


						}
					});
				})
			},
			deleteVideo(event) {
				this.videoList.splice(event.index, 1);
				this.carVideo.splice(event.index, 1);

			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #F6F6F6;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding-bottom: 200rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 130rpx) !important;
		padding-top: 31rpx;
	}

	.report-con {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.report-tab {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-right: -31rpx;

	}

	.tab-item {
		width: 204rpx;
		height: 60rpx;
		background: #F1F1F1;
		border-radius: 10rpx;
		margin-top: 23rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 35rpx;
		color: #999999;
		font-size: 27rpx;
	}

	.report-text {
		// width: 688rpx;
		margin-top: 31rpx;

	}

	.report-text ::v-deep .u-textarea {
		background: #F7F7F7;
	}

	.report-text ::v-deep .u-textarea__count {
		background: #F7F7F7 !important;
	}

	.upload-img {
		width: 688rpx;
		margin-top: 31rpx;
	}

	.but-con {
		width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		bottom: 0;
		box-sizing: content-box;
		display: flex;
		align-items: center;
	}

	.card-but {
		width: 673rpx;
		height: 77rpx;
		margin: 0 auto;
		background: #2FCC71;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 27rpx;
	}

	.tagActive {
		background: #FF6000;
		color: #FFFFFF;
	}
</style>